<template>
  <div id="main" style="width: 600px; height: 600px">
    图表3,用折线图展示每月上架商品的数量变化
  </div>
</template>

<script>
import * as echarts from "echarts";
import axios from "axios";
import { onMounted } from "vue";
export default {
  setup() {
    onMounted(() => {
      datainit();
    });
    const datainit = () => {
      let url = "/api/change";
      axios.get(url).then((res) => {
        console.log(res);
        let data = res.data;
        let ictys = [];
        let buys = [];
        for (let i in data) {
          ictys.push(data[i].month);
          buys.push(data[i].amount);
        }
        console.log(ictys);
        console.log(buys);
        init(ictys, buys);
      });
    };
    const init = (ictys, buys) => {
      let option = {
        title: {
          text: "折线图显示月份的消费额变化",
        },
        xAxis: {
          name: "月份",
          data: ictys,
        },
        yAxis: {
          name: "消费额",
        },
        series: [
          {
            type: "line",
            data: buys,
          },
        ],
      };
      let myChart = echarts.init(document.getElementById("main"));
      myChart.setOption(option);
    };
  },
};
</script>


<style></style>